<template>
  <div>
      <a-select  @change="SelectChange" v-model="detailData" class="tableSelect">
          <img src="@/assets/images/icon/arrow.png" class="arrowIcon" slot="suffixIcon" />
          <a-select-option v-for="d in selectData" :value="d.value">
              {{d.label}}
          </a-select-option>
      </a-select>
  </div>
</template>

<script>
    import {getDeptList,getDoctorGroupList,getDiseaseList,getDoctorList} from '@/api/common';
    export default {
        name: "detailSelect",
        props: {
            detailData: {
                type: String,
                default: false
            },
            title:{
                type: String,
                default: false
            }
        },
        data() {
            return {
                selectData:[],
            }
        },
        created(){
          console.log(this.detailData)
        },
        mounted () {
            this.HandleSearch()
        },
        methods: {
            async HandleSearch(){
                if(this.title=='medical'){
                    const res = await getDoctorGroupList();
                    if (res['data']) {
                        this.selectData=res.data.map((item)=>{
                            return {label:item.groupname,value: item.groupcode}
                        })
                    }
                }
                else if(this.title=='doctor'){
                    const res = await getDoctorList();
                    if (res['data']) {
                        this.selectData=res.data.map((item)=>{
                            return {label:item.doctorName,value: item.doctorCode}
                        })
                    }
                }
            },
            SelectChange(e){
                console.log(e)
                this.$emit('selectChange',e)
            }
        }
    }
</script>

<style  lang="stylus" scoped>
    .tableSelect{width:120px; margin-top 0px; margin-right 20px;}
    .arrowIcon{width:14px;height:14px;display inline-block; vertical-align middle; cursor pointe; transition 0.5s;}
    .ant-input{border: 1px solid #D8DCF7; border-radius: 8px;}
    .ant-select-open .arrowIcon{ transform:rotate(180deg) }
</style>
